<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus';

import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue';

import {
  ElButton,
  ElDialog,
  ElDivider,
  ElForm,
  ElFormItem,
  ElInput,
} from 'element-plus';

import { catalogApi } from '#/api';

import CatalogTreeDialog from './catalog-tree.vue';

const props = defineProps({
  isImportResourceDialogShow: {
    type: Boolean,
    default: false,
  },
  catalogBreadCrumb: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits([
  'closeImportResourceDialog',
  'changeCatalogBreadCrumb',
  'importResourceConfirm',
]);

const { catalogBreadCrumb, isImportResourceDialogShow } = toRefs(props);

const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  link: [{ required: true, message: '资源链接不能为空！', trigger: 'blur' }],
});
const path = computed(() => {
  let pathStr = '';
  catalogBreadCrumb.value.forEach((catalog: any) => {
    pathStr = `${pathStr + catalog.title} / `;
  });
  return pathStr;
});
const formData = reactive({
  data: {
    link: '',
    path,
  },
});
const isCatalogTreeDialogShow = ref(false);
watch(isImportResourceDialogShow, (val) => {
  if (val === false) {
    formData.data.link = '';
  }
});
onMounted(() => {});
const closePreviewDialog = () => {
  emit('closeImportResourceDialog');
};
const importResource = (formRef: FormInstance) => {
  if (!formRef) {
    return;
  }
  formRef.validate((valid) => {
    if (valid) {
      emit('importResourceConfirm', formData.data.link);
      emit('closeImportResourceDialog');
    }
  });
};
const changeSavePath = () => {
  isCatalogTreeDialogShow.value = true;
};
const handleCloseCatalogTreeDialog = () => {
  isCatalogTreeDialogShow.value = false;
};
const handleConfirmSavePath = (catalogId: string) => {
  catalogApi.getCatalogBreadCrumb(catalogId).then((res) => {
    emit('changeCatalogBreadCrumb', res.data);
  });
};
</script>

<template>
  <div>
    <ElDialog
      class="dialog-title"
      v-model="isImportResourceDialogShow"
      width="auto"
      align-center
      @close="closePreviewDialog"
      destroy-on-close
    >
      <template #header>
        <div class="my-header">
          <h4 style="color: rgb(48 45 45)">引入资源</h4>
        </div>
        <ElDivider style="padding: 0; margin: 0" />
      </template>
      <ElForm
        style="padding: 30px"
        ref="ruleFormRef"
        :model="formData.data"
        label-width="120px"
        label-position="right"
        :rules="rules"
      >
        <ElFormItem label="资源链接：" size="default" prop="link">
          <ElInput
            v-model.trim="formData.data.link"
            placeholder="请输入资源链接"
          />
        </ElFormItem>
        <ElFormItem label="存放路径：" size="default" prop="path">
          <ElInput v-model.trim="formData.data.path" :readonly="false">
            <template #append>
              <ElButton text @click="changeSavePath">更改</ElButton>
            </template>
          </ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElDivider
            border-style="hidden"
            style="margin-top: 5px; margin-bottom: 5px"
          />
        </ElFormItem>
      </ElForm>
      <template #footer>
        <span class="dialog-footer">
          <ElButton
            class="mybtn"
            type="primary"
            @click="importResource(ruleFormRef as FormInstance)"
            >引入
          </ElButton>
          <ElButton class="mybtn" @click="closePreviewDialog">取消</ElButton>
        </span>
      </template>
    </ElDialog>
    <CatalogTreeDialog
      v-if="isCatalogTreeDialogShow"
      :is-catalog-tree-dialog-show="isCatalogTreeDialogShow"
      @confirm-save-path="handleConfirmSavePath"
      @close-catalog-tree-dialog="handleCloseCatalogTreeDialog"
      function-type="select_catalog"
    />
  </div>
</template>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}

.my-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding-top: 10px;
  padding-bottom: 5px;
  padding-left: 20px;
  font-size: 18px;
}

:deep(.el-dialog) {
  height: auto;
  box-shadow: 0 0 50px rgb(0 0 0 / 50%);
}

.mybtn {
  width: 80px;
  height: 30px;
  font-weight: bolder;
  letter-spacing: 1px;
  border-radius: 3px;
}
</style>
